<!--  -->
<template>
  <div class="quick-login">
    <div class="f-bold f-24">{{type==1?'手机快捷登录':'手机号绑定'}}</div>
    <div class="f-12 mt-20">未注册的手机将自动创建融媒优品帐号</div>
    <div class="line mt-14"></div>
    <cube-input class="mobile" v-model="mobile" placeholder="手机号" clearable autofocus></cube-input>
    <cube-validator ref="mobile" v-model="valid[0]" :model="mobile" :rules="rules"></cube-validator>
    <div class="vcode flex aligin-center">
      <cube-input class="vcode-input" v-model="vcode" placeholder="手机号验证码" clearable autofocus></cube-input>
      <span
        class="timer"
        @click="sendVcode"
      >{{((typeof this.vcodeCount)==="string")?vcodeCount:vcodeCount+'s'}}</span>
    </div>
    <cube-validator ref="vcode" v-model="valid[1]" :model="vcode" :rules="vcodeRules"></cube-validator>
    <button class="z-btn color-white f-16" @click="submit">确定</button>
    <!-- <div class="clear-fix mt-20">
      <router-link :to="{name:'login',query:{pid:$route.query.pid,aid:$route.query.aid}}" replace>
        <span class="float-r f-14">帐号密码登录</span>
      </router-link>
    </div> -->
  </div>
</template>

<script>
import { quickLogin, getMsgCode, bind_mobile } from "../api/api";
export default {
  components: {},
  data() {
    return {
      type: 1,
      mobile: "", //手机号
      vcode: "", //验证码
      vcodeTimer: null, //验证码计时器
      vcodeCount: "获取验证码",
      valid: [undefined, undefined], //校验结果
      rules: {
        required: true,
        type: "tel"
      },
      vcodeRules: {
        required: true
      }
    };
  },
  computed: {},
  watch: {},
  methods: {
    //发送验证码
    sendVcode() {
      if (!(typeof this.vcodeCount === "string")) {
        return;
      }
      const mobile = this.$refs.mobile.validate();
      Promise.all([mobile]).then(() => {
        if (this.valid[0]) {
          this.vcodeCount = 60;
          this.vcodeTimer = setInterval(() => {
            if (this.vcodeCount - 1 < 0) {
              this.vcodeCount = "获取验证码";
              clearInterval(this.vcodeTimer);
              this.vcodeTimer = null;
            } else {
              this.vcodeCount -= 1;
            }
          }, 1000);
          getMsgCode({ mobile: this.mobile }).then(res => {
            // this.vcode = res.data.result;
          });
        } else {
          const toast = this.$createToast({
            txt: "手机号有误",
            type: "error"
          });
          toast.show();
        }
      });
    },
    //提交
    submit() {
      const mobile = this.$refs.mobile.validate();
      const vcode = this.$refs.vcode.validate();
      Promise.all([mobile, vcode]).then(() => {
        if (this.valid.every(item => item)) {
          let params = {
            mobile: this.mobile,
            msgCode: this.vcode,
            device_code: 1
          };
          if (this.type == 2) {
            bind_mobile(params).then(res => {
              this.$store.commit("saveToken", res.data.result.token);
              if(parseInt(this.$route.query.pid)){
                 this.$router.go(-2)
              }
              else{
                  this.$router.replace("/index/home")
              }
              
            });
          } else {
            if(parseInt(this.$route.query.pid)){
              params=Object.assign({},params,{pid:this.$route.query.pid})
            }
            if(this.$route.query.aid){
              params = Object.assign({}, params, { aid: this.$route.query.aid });
            }
            if(this.$route.query.wx_unionid){
               params = Object.assign({}, params, this.$route.query);
            }
            delete params.type
            quickLogin(params).then(res => {
              if (res.data.result.token) {
                this.$store.commit("saveToken", res.data.result.token);
                 if(parseInt(this.$route.query.pid)){
                 this.$router.go(-2)
                }
                else{
                    this.$router.replace("/index/home")
                }
              }
            });
          }
        }
      });
    }
  },
  created() {},
  mounted() {
    if (this.$route.query.type) {
      this.type = this.$route.query.type;
    }
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {
    clearInterval(this.vcodeTimer);
    this.vcodeTimer = null;
  } //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../assets/style/mixin"); //引入公共css类
.f-24 {
  font-size: 24px;
}
.quick-login /deep/ .cube-input {
  box-shadow: 0px 5px 20px 2px rgba(162, 162, 162, 0.19);
}
.quick-login /deep/ .cube-input:after {
  border: none;
}
.quick-login {
  height: 100%;
  padding: 93px 41px 0 41px;
  box-sizing: border-box;
  .line {
    margin-left: 7px;
    width: 30px;
    height: 3px;
    background: #ea373f;
  }
  .mobile {
    margin: 54px 0 0 0;
    height: 44px;
    font-size: 14px;
  }
  .vcode {
    margin: 16px 0 0 0;
    height: 44px;
    font-size: 14px;
    box-shadow: 0px 5px 20px 2px rgba(162, 162, 162, 0.19);
  }
  .vcode-input {
    width: 180px;
    height: 44px;
    box-shadow: none;
  }
  .timer {
    height: 44px;
    line-height: 44px;
    flex: 1;
    text-align: center;
    box-shadow: 0px 5px 20px 2px rgba(162, 162, 162, 0.19);
  }
  .z-btn {
    margin: 30px 0 0 0;
    width: 100%;
    height: 44px;
    .bg-1();
  }
}
</style>